{extend name="default/template/base_index" /}


{block name="area_header"}
	<link type="text/css" rel="stylesheet" href="__CDN__/select2/4.0.0/css/select2.min.css" />
	<script type="text/javascript" src="__CDN__/select2/4.0.0/js/select2.full.js"></script>
	<script type="text/javascript" src="__CDN__/select2/4.0.0/js/i18n/zh-CN.js"></script>
<style>
.bor_lit{ border-color: #eee!important;}
.select2{ width:250px !important;z-index: 99; }
.select2-hidden-accessible{ width:1px !important; }
.select2-selection{ border-color:#ddd !important;height:35.56px !important; }
.select2-selection .select2-selection__rendered{ line-height: 35.56px !important;height:35.56px !important; }
.select2-dropdown{ border-color: #ddd !important; }
</style>
{/block}

{block name="area_body"}
	{include file="default/Widget/topbar" /}
	<div class="admin-main container-fluid">
		{include file="default/Widget/left" /}
		<div class="admin-main-content">
			{include file="default/Widget/breadcrumb" /}
			<div class="table-responsive well ">

				<!-- Nav tabs -->
				<ul class="nav nav-tabs" role="tablist">
					<li role="presentation" class="active"><a href="#user" role="tab" data-toggle="tab">成员授权</a>
					</li>
					<li role="presentation" ><a href="{:url('AuthManage/access',['groupid'=>$groupid])}" role="tab" >访问授权</a>
					</li>
					<!--<li role="presentation">-->
					 <!--<a href="{:url('AuthManage/apiaccess')}">API授权</a>-->
					<!--</li>-->
				</ul>

				<!-- Tab panes -->
				<div class="tab-content">
					<div role="tabpanel" class="tab-pane active" id="user">
						<!-- 过滤\查询按钮 -->
						<div class="filter-controls pull-right">
							<form class="form-inline groupForm" method="post" action="{:url('AuthManage/user')}">
								<div class="form-group-sm">
									<label class="control-label">用户组</label>
									<select id="groups"  name="groupid" class="form-control">
										{volist name="groups" id="vo"}
											<option {eq name="groupid" value="$vo.id"}selected="selected"{/eq} value="{$vo.id}" >{$vo.title ?? ''}</option>
										{/volist}
									</select>
								</div>
							</form>
						</div>

						<!-- 过滤\查询按钮 -->
						<div class="filter-controls pull-left">
							<form action="" class="form-inline addToGroupForm" method="post">
								<input type="hidden" name="groupid" value="{$groupid}" />
								<!--<input  id="user_select2"  type="text" style="width:220px;padding: 10px 15px;" name="uid" class="form-control" />-->
								<select id="user_select2" name="uid" class="form-control">
 									<option></option>
								</select>
								{eq name='groupid' value='7'}
<input type="text" name="extra" class="form-control" style="display: inline;width:auto;" id="js-extra" value="" placeholder="推荐码"/>
<select name="prov" id="prov"  class="form-control inline input-number" data-type="province">
  <option value="">==省份==</option>
  {volist name="provs" id="v"}
    <option value="{$v.provinceID}-{$v.province}">{$v.province}</option>
  {/volist}
</select>
<select name="city" id="city" class="form-control inline input-number bor_lit" data-type="city">
  <option value="">==城市==</option>
</select>
<select name="area" class="form-control input-number inline bor_lit" id="area">
  <option value="">==市区==</option>
</select>
								{/eq}
								<a id="addtogroup" target-form="addToGroupForm" class="ajax-post btn btn-sm btn-primary" href="{:url('AuthGroupAccess/addToGroup')}">添加到</a>
							</form>
						</div>

						<!-- 列表开始 -->
						<table class="table table-striped table table-hover  table-condensed">
							<thead>
								<tr>
									<th>头像/用户id</th>
									<th>昵称</th>
									<!--<th>最后登录时间</th>
									<th>最后登录IP</th>-->
									{eq name='groupid' value='7'}
									<th>推荐码</th>
									<th>地区</th>
									{/eq}
									<th>状态</th>
									<th>{:L('OPERATOR')}</th>
								</tr>
							</thead>
							<tbody>
								{empty name="list"}
									<tr>
										<td colspan="6" class="text-center">{:L('NO_DATA')}</td>
									</tr>
									{else/}
									{volist name="list" id="vo"}
										<tr>
											<td>
												<img class="m-avatar"
													 src="{:app\\src\\base\\helper\\ConfigHelper::getAvatarUrl($vo['uid'],120)}"/>
												{$vo.uid}
											</td>
											<td>{$vo.nickname}</td>
											{eq name='groupid' value='7'}
											<td>{$vo.extra ?? ''}</td>
											<td>{$vo.loc ?? ''}</td>
											{/eq}
											<td>{$vo.status|getStatus}</td>
											<td>
												<a href="{:url('AuthGroupAccess/delFromGroup',array('uid'=>$vo['uid'],'groupid'=>$groupid))}" class="ajax-get btn btn-default btn-sm"><i class="fa fa-eye"></i>解除授权</a>
											</td>
										</tr>

									{/volist}
								{/empty}
							</tbody>
						</table>
						<div>{$show}</div>
						<!-- 列表结束 -->
					</div>

					<div role="tabpanel" class="tab-pane " id="access">
						loading...
					</div>
				</div>

			</div>
		</div>
		<!-- END admin-main-content -->
	</div>
	<!-- END admin-main-->
{/block}

{block name="area_footer"}
	<script type="text/javascript">
	function myalert(){
	  var msg  = ('undefined' == typeof arguments[0]) ? 'success' : arguments[0];
	  var type = ('undefined' == typeof arguments[1]) ? true : arguments[1];
	  $.scojs_message(msg, type ? $.scojs_message.TYPE_OK : $.scojs_message.TYPE_ERROR);
	}
	$(function(){

		$("#groups").change(function(){
			$(".groupForm").submit();
		});
		$("#addtogroup").text("添加到"+$("#groups").find("option:selected").text());

		var aid,cid,flag;
	  $(document).on('change','#prov,#city',function(event) {
	    var $this = $(this),aid_src = $this.val(),type = $this.data('type');
	    if(aid_src){
		    var aid = aid_src.split("-");
		    $.getJSON("{:url('school/getArea')}",{ aid:aid[0],type:type },function(data){
		      //
		      var info = data.info;
		      flag = (type == 'city' ? true:false);
		      var str = "<option value=''>==选择==</option>",item;
		      if(data.status){
		        if(flag && !info) myalert('请先选择省份',false);
		        for (var i = 0;i < info.length ; i++) {
		        	item = info[i];
		          if(flag){ //areas
		            str += "<option value='"+item.areaID+"-"+item.area+"'>"+item.area+"</option>";
		          }else{ //citys
		            str += "<option value='"+item.cityID+"-"+item.city+"'>"+item.city+"</option>";
		          }
		        }
		        if(str){
		          if(type == 'province') $('#city').html(str);
		          else if (type == 'city') $('#area').html(str);
		        }
		      }else{
		        myalert(info.false);
		      }
		    })
		  }else{
        if(type == 'province'){
           $('#city').html("<option value=''>==选择==</option>");
           $('#area').html("<option value=''>==选择==</option>");
        }else if (type == 'city'){
           $('#area').html("<option value=''>==选择==</option>");
        }
 			}

  	});
		$("#user_select2").select2({
			placeholder: "输入用户uid或昵称查询"
			,
			language: "zh-CN",
			ajax: {
			    url: "{:url('Member/select')}",
			    dataType: 'json',
			    delay: 250,
			    data: function (params) {
			    	var queryParameters = {
				      q: params.term
						};

    				return queryParameters;

			    },
			    processResults: function (result, page) {
console.log(result);
			    	if(!result.data){
							result.data = [];
							result.data['nodata']="无相关数据";
			    	}
			      	// parse the results into the format expected by Select2.
			      	// since we are using custom formatting functions we do not need to
			      	// alter the remote JSON data
		      	  result.data.unshift({id:0,uid:0,nickname:'',head:''});
			      	return {
			        	results: result.data
			      	};
			    },
			    cache: true
		  	},
			  minimumInputLength: 0,
				templateSelection: function (repo) {
	  				if(repo.id){
		          return repo.nickname ? '[id:'+repo.id+'] '+repo.nickname: (repo.text ? repo.text : '[id:'+repo.id+']');
		        }else{
		          return repo.text;
		        }

				},
			  templateResult: function (repo) {

      		if (repo.loading) return repo.text;
					if(repo.nodata) return repo.nodata;
      				var markup = parseInt(repo.id) ? '<div><img src="'+repo.head+'" style="width:30px;height:30px;"/>[id:'+repo.id+'] '+repo.nickname+'</div>' : '<div>清除选择 X</div>';
      				return $(markup);
    			},
		});


	})
	</script>
{/block}